<template>
  <view class="container">
    <uni-nav-bar
      dark
      :fixed="true"
      shadow
      background-color="#007AFF"
      status-bar
      left-icon="left"
      left-text="返回"
      title="自定义导航栏"
      @clickLeft="back"
    />
    <uni-card is-full :isShadow="false">
      <text class="uni-h6"
        >本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text
      >
    </uni-card>
    <uni-section
      title="基本用法"
      subTitle="使用 title 属性设置导航栏标题"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar title="标题" />
      </view>
    </uni-section>
    <uni-section
      title="开启阴影"
      subTitle="使用 shadow 属性启用阴影"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar
          shadow
          left-icon="left"
          title="开启阴影"
          @clickLeft="back"
        />
      </view>
    </uni-section>
    <uni-section
      title="开启暗黑模式"
      subTitle="使用 dark 属性设置暗黑模式"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar
          shadow
          left-icon="left"
          dark
          title="暗黑模式"
          @clickLeft="back"
        />
      </view>
    </uni-section>
    <uni-section
      title="带返回箭头+右侧图标"
      subTitle="使用 left-icon/right-icon 设置左右图标"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" />
      </view>
    </uni-section>
    <uni-section
      title="左侧文字+右侧文字"
      subTitle="使用 left-text/right-text 设置左右文字"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar
          shadow
          left-icon="left"
          leftText="返回"
          rightText="设置"
          title="标题"
        />
      </view>
    </uni-section>
    <uni-section
      title="自定义颜色"
      subTitle="使用 color/background-color 属性设置前景背景色"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <view class="box-bg">
          <uni-nav-bar
            dark
            color="#999"
            backgroundColor="#f5f5f5"
            shadow
            left-icon="left"
            leftText="返回"
            rightText="设置"
            title="自定义颜色"
          />
        </view>
      </view>
    </uni-section>
    <uni-section
      title="自定义高度"
      subTitle="使用 height 修改组件高度"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <view class="box-bg">
          <uni-nav-bar
            height="65px"
            dark
            shadow
            left-icon="left"
            leftText="返回"
            rightText="设置"
            title="自定义高度"
          />
        </view>
      </view>
    </uni-section>
    <uni-section
      title="自定义内容"
      subTitle="使用 left/right/default 插槽自定义内容"
      type="line"
      style="margin-bottom: 3px"
    >
      <view class="box-bg">
        <uni-nav-bar>
          <block slot="left">
            <view class="city">
              <view>
                <text class="uni-nav-bar-text">{{ city }}</text>
              </view>
              <uni-icons type="arrowdown" color="#666" size="18" />
            </view>
          </block>
          <view class="input-view">
            <uni-icons
              class="input-uni-icon"
              type="search"
              size="18"
              color="#999"
            />
            <input
              confirm-type="search"
              class="nav-bar-input"
              type="text"
              placeholder="输入搜索关键词"
              @confirm="confirm"
            />
          </view>
          <block slot="right">
            <view class="city"> 搜索 </view>
          </block>
        </uni-nav-bar>
      </view>
    </uni-section>
  </view>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        city: "北京",
      };
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1,
        });
      },
      showMenu() {
        uni.showToast({
          title: "菜单",
        });
      },
      clickLeft() {
        uni.showToast({
          title: "左侧按钮",
        });
      },
      search() {
        uni.showToast({
          title: "搜索",
        });
      },
      showCity() {
        uni.showToast({
          title: "选择城市",
        });
      },
      scan() {
        uni.showToast({
          title: "扫码",
        });
      },
      confirm() {
        uni.showToast({
          title: "搜索",
        });
      },
    },
    onPullDownRefresh() {
      console.log("onPullDownRefresh");
      setTimeout(function () {
        uni.stopPullDownRefresh();
        console.log("stopPullDownRefresh");
      }, 1000);
    },
  };
</script>
<style lang="scss">
  $nav-height: 30px;

  .box-bg {
    background-color: #f5f5f5;
    padding: 5px 0;
  }

  .city {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    // width: 160rpx;
    margin-left: 4px;
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }
</style>
